<template>
  <section>
    <!--头部-->
    <nav class="nav navbar-fixed-top">
      <router-link :to="{path:'/cityList'}">
        <span class="glyphicon glyphicon-menu-left pull-left back" aria-hidden="true"></span>
      </router-link>

      <span>{{myCity}}</span>
      <router-link :to="{path:'/cityList'}" class="pull-right changeCity">切换城市</router-link>
    </nav>
    <!--搜索地点-->
    <div class="input">
      <input type="text" placeholder="输入学校、商务楼、地址等" v-model="inputV" class="input-group form-control">
      <button class="btn btn-primary" @click="refer">提交</button>
    </div>
    <p class="cow col-xs-12 searchHistory" v-if="isTrue">搜索历史</p>
    <div v-for="item in searchHistory" v-if="isTrue" @click="toTakeAway(item)">
      <div class="site">
        <p>{{item.name}}</p>
        <p>{{item.address}}</p>
      </div>
    </div>
    <div v-if="isTrue" @click="remove" class="clear">
      <p>清除历史</p>
    </div>
    <!--选择地点-->
    <div v-for="item in siteList" @click="changeSite(item)">
      <div class="site">
        <p>{{item.name}}</p>
        <p>{{item.address}}</p>
      </div>
    </div>
  </section>

</template>

<script>
  import Vue from 'vue'
  export default {
    name: "CitySearch_xsh",
    data(){
      return {
        myCity:'',//存储当前城市名
        cityId:'',//存储城市id
        inputV:'',//存储输入框的值
        siteList:[],// 存储搜索到的地点
        isTrue:true,//是否显示隐藏搜索历史字样
        searchHistory: []// 存储未处理的搜索历史
      }
    },
    created(){
      this.myCity = this.$route.query.Mycity;
      this.cityId = this.$route.query.index;
      this.$store.state.cityID = this.cityId;
      console.log(this.cityId)
    },
    mounted() {
      // 获取搜索历史记录
      if (localStorage.getItem("arr") !== null) {
        this.searchHistory =  JSON.parse(localStorage.getItem("arr"));
      }
    },
    methods:{
      // 提交按钮的点击事件
      refer(){
        // 发起网络请求 请求搜索地址
        if (this.inputV == '') {
          alert('请输入内容');
        } else{
          Vue.axios.get('https://elm.cangdu.org/v1/pois?city_id='+ this.cityId + '&keyword=' + this.inputV, null).then((res) => {
            this.siteList = res.data;
            this.isTrue = false;
          });
        }
      },
      changeSite(data) {
        this.$router.push({name:'takeaway'});
        this.$store.state.city = data;
        let list = JSON.parse(localStorage.getItem("arr") || '[]');
        list.unshift(data);
        let hash = {};
        list = list.reduce(function(item, next) {
          hash[next.name] ? '' : hash[next.name] = true && item.unshift(next);
          return item
        }, []);
        localStorage.setItem("arr", JSON.stringify(list));
      },
      // 跳转到外卖页面
      toTakeAway(data){
        this.$router.push({name:'takeaway'});
        // this.$store.commit('history', data);
        this.$store.state.city = data;
        let list = JSON.parse(localStorage.getItem("arr") || '[]');
        list.unshift(data);
        let hash = {};
        list = list.reduce(function(item, next) {
          hash[next.name] ? '' : hash[next.name] = true && item.unshift(next);
          return item
        }, []);
        localStorage.setItem("arr", JSON.stringify(list));
      },
      remove(){
        localStorage.removeItem('arr');
        this.searchHistory.splice(0, this.searchHistory.length);
      }
    }

    }
</script>

<style scoped>
  section{
    width: 100%;
    height: 100%;
    background-color: rgb(245, 245, 245);
  }
  .nav{
    width: 100%;
    height: 0.35rem;
    text-align: center;
    background-color: #298eeb;
    line-height: 0.35rem;
    color: white;
    font-size: 0.16rem;
  }
  .back{
    line-height: 0.35rem;
    color: white;
    margin-left: 0.1rem;
  }
  .changeCity{
    color: white;
    margin-right: 0.1rem;
    font-size: 0.12rem;
  }
  .input{
    width: 100%;
    background-color: white;
    margin-top: 0.5rem;
    text-align: center;
    border-bottom: 0.02rem solid lightgray;
  }
  .input > input{
    display: inline-block;
    width: 90%;
  }
  .btn{
    width: 90%;
    margin: 0.05rem 0;
  }
  .searchHistory{
    margin: 0.03rem 0;
    font-size: 0.12rem;
    border-bottom: 0.02rem solid lightgray;
  }
  .site{
    width: 100%;
    margin: 0.05rem 0;
    border-bottom: 0.01rem solid lightgray;
  }
  .site>p{
    margin-left: 0.1rem;
    padding:0;
    color: #000;
  }
  .clear{
    text-align: center;
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    color: #3190E8;
    font-size: 0.16rem;
  }
</style>
